<template>
  <view class="packPage">
    <u-navbar
      title="套餐详情"
      :autoBack="true"
      :fixed="true"
      :bgColor="'#fff'"
      :zIndex="1000"
      :height="44"
      :placeholder="true"
      :titleStyle="{
        color: '#333',
        fontSize: '16px',
      }"></u-navbar>
    <view class="content">
      <view class="title">
        <view class="line"></view>
        运营范围
      </view>
      <view class="data">
        <view class="name">运营商:</view>
        <view class="">{{ leaveMsg.yunying_text }}</view>
      </view>
    </view>
    <view class="content">
      <view class="title">
        <view class="line"></view>
        套餐说明
      </view>
      <view class="data">
        <view class="name">套餐类型:</view>
        <view class="">{{ leaveMsg.taocan_type }}</view>
      </view>
      <view class="data">
        <view class="name">套餐:</view>
        <view class="">{{ leaveMsg.taocan }}</view>
      </view>
      <view class="data">
        <view class="name">基本价格:</view>
        <view class="red">{{ leaveMsg.jiben_price }}元</view>
      </view>
      <view class="data">
        <view class="name">套餐描述:{{ leaveMsg.miaoshu_text }}</view>
      </view>
      <view class="data">
        <view class="name">套餐详情:</view>
        <view class="">{{ leaveMsg.taocan_text }}</view>
      </view>
    </view>
    <view class="content">
      <view class="title">
        <view class="line"></view>
        其他费用
      </view>
      <view class="data">
        <view class="name"></view>
        <view class="red">{{ leaveMsg.other_price }}元</view>
      </view>
    </view>
    <view class="content">
      <view class="title">
        <view class="line"></view>
        总金额
      </view>
      <view class="data">
        <view class="name">全部费用总和:</view>
        <view class="red">{{ leaveMsg.total.toFixed(2) }}元</view>
      </view>
    </view>
    <view class="submit" @click="handleSubmit">前往下单</view>
  </view>
</template>

<script>
import { getDetail } from "@/api/mainapi.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      leaveMsg: {},
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad(param) {
    let item = JSON.parse(param.data);
    // this.leaveMsg = item;
    // console.log(this.leaveMsg, "///////////////");
    this.getDetail(item.id);
  },
  methods: {
    async getDetail(id) {
      const res = await getDetail({
        id: id,
      });
      console.log(res);
      if (res.response.statusCode === 200) {
        this.leaveMsg = res.data.data;
        console.log(res.data.data, "res.data.data");
      }
    },
    handleSubmit() {
      uni.navigateTo({
        url: "/pages/index/orderNow?id=" + this.leaveMsg.id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.packPage {
  height: 100%;
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  .content {
    background: #fff;
    padding: 20rpx 50rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
    border: 2rpx solid;
    border-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)
      )
      2 2;
    margin-top: 20rpx;
    .title {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #323334;
      .line {
        width: 8rpx;
        height: 32rpx;
        background: #49a1fd;
        margin-right: 10rpx;
      }
    }
    .data {
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 28rpx;
      color: #9a9a9a;
      margin-top: 20rpx;
    }
    .red {
      color: #f60000;
    }
  }
  .submit {
    width: 96%;
    height: 88rpx;
    margin-left: 2%;
    margin-top: 40rpx;
    background: linear-gradient(142deg, #0ca8fd 0%, #4272fa 100%);
    border-radius: 16rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
  }
}
</style>
